<template>
    <view class="container">
        <view class="header w-96 flex flex-col ">
            <view class="flex justify-center items-center text-white mt-3" v-if="!isLogin()">
                <navigator class="text-lg" url="/pages/login/login" open-type="navigate" hover-class="navigator-hover">
                    点击登录
                </navigator>
            </view>
            <view class="flex mt-3" v-else @tap.stop="uiwu.openWindow('/pages/user/information')">
                <image :src="userInfo.avatar" mode="aspectFit" class=" w-14 h-14 ml-9 rounded-full" />
                <view class="flex flex-col text-white text-sm ml-4 h-10">
                    <text class="py-1">{{ userInfo.nickname }}</text>
                    <text class="py-1">ID:{{ userInfo.user_sn }}</text>
                </view>
                <view class="ml-4 mt-1">
                    <image src="@/static/image/vip-icon.png" mode="aspectFit" class=" h-3 w-11"
                        v-if="userInfo.is_vip" />
                </view>
            </view>
            <Gap height="20rpx"></Gap>
            <view class="w-full flex justify-center">
                <view class="line w-96"></view>
            </view>
            <Gap height="10rpx"></Gap>
            <view class="w-full flex justify-center items-center">
                <view class="flex flex-col items-center text-white"
                    @tap.stop="uiwu.openWindow('/pages/recharge/record')">
                    <text>{{ userInfo.now_money || 0 }}</text>
                    <text>金币</text>
                </view>
                <view class="item-line mx-7"></view>
                <view class="flex flex-col items-center text-white" @tap.stop="uiwu.openWindow('/pages/prize/prize?index=0')">
                    <text>{{ userInfo.grab_prize_num || 0 }}</text>
                    <text>娃娃</text>
                </view>
                <view class="item-line mx-7"></view>
				<!-- uiwu.openWindow('/pages/pointsmall/pointsmall') -->
                <view class="flex flex-col items-center text-white" @tap.stop="jumpIntergral">
                    <text>{{ userInfo.integral || 0 }}</text>
                    <text>积分</text>
                </view>
                <view class="item-line mx-7"></view>
                <view class="flex flex-col items-center text-white" @tap.stop="uiwu.openWindow('/pages/user/coupon')">
                    <text>{{ userInfo.coupon_num || 0 }}</text>
                    <text>优惠券</text>
                </view>
            </view>
        </view>
        <!-- 我的订单 -->
        <Gap height="30rpx"></Gap>
        <view class="w-96 flex flex-col justify-center items-center bg-white rounded-xl">
            <view class="order flex  justify-between w-90 mt-4">
                <text class="title font-bold text-lg">我的订单</text>
                <!-- <view>
                    <text>MORE</text>
                    <text>></text>
                </view> -->
            </view>
            <view class="order flex justify-between w-4/5 mt-4">
                <view class="flex flex-col items-center" @tap.stop="uiwu.openWindow('/pages/prize/prize?index=0')">
                    <image src="@/static/image/order-daifahuo.png" mode="aspectFit" class="w-6 h-6" />
                    <text class="text py-1 text-xs">寄存中</text>
                </view>
                <view class="flex flex-col items-center" @tap.stop="uiwu.openWindow('/pages/prize/prize?index=1')">
                    <image src="@/static/image/order-daishouhuo.png" mode="aspectFit" class="w-6 h-6" />
                    <text class="text py-1 text-xs">待发货</text>
                </view>
                <view class="flex flex-col items-center" @tap.stop="uiwu.openWindow('/pages/prize/prize?index=2')">
                    <image src="@/static/image/order-yichongfa.png" mode="aspectFit" class="w-6 h-6" />
                    <text class="text py-1 text-xs">待收货</text>
                </view>
                <view class="flex flex-col items-center" @tap.stop="uiwu.openWindow('/pages/prize/prize?index=3')">
                    <image src="@/static/image/order-yiwancheng.png" mode="aspectFit" class="w-6 h-6" />
                    <text class="text py-1 text-xs">已完成</text>
                </view>
                <view class="flex flex-col items-center" @tap.stop="uiwu.openWindow('/pages/prize/prize?index=4')">
                    <image src="@/static/image/order-shouhou.png" mode="aspectFit" class="w-6 h-6" />
                    <text class="text py-1 text-xs">已兑换</text>
                </view>
            </view>
        </view>
        <!-- 我的服务 -->
        <Gap height="30rpx"></Gap>
        <view class="w-96 flex flex-col justify-center items-center bg-white rounded-xl">
            <view class="order flex  justify-between w-90 mt-4">
                <text class="title font-bold text-lg">我的服务</text>
                <view>
                    <!-- <text>MORE</text>
                    <text>></text> -->
                </view>
            </view>
            <view class="order flex flex-wrap justify-start w-90 mt-2">
                <view class="flex flex-col  items-center m-2 w-16 " v-for="(item, index) in menulist" :key="index"
                    @tap.stop="openWidnow(item)">
                    <image :src="item.icon" mode="aspectFit" class="w-6 h-6" />
                    <text class="text py-1 text-xs">{{ item?.name }}</text>
                </view>
            </view>
        </view>
    </view>
    <Footer />
</template>
<script setup lang="ts">
import { isLogin } from '@/api/common';
import { uiwu, getMenulist } from '@/api/interface/interface';
import type { UserMenuList } from '@/api/type/interface';
import Gap from '@/components/gap.vue';
import Footer from "@/components/footer.vue";
import { userStore } from '@/store/userStore';
import { footerStore } from '@/store/footerStore';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { computed, ref, toRefs } from 'vue';

const menulist = ref<UserMenuList[]>([]);
const { updateUserInfo } = userStore();

const { userInfo } = toRefs(userStore());


onShow(() => {
    updateUserInfo();
    getMenulist().then(res => {
        menulist.value = res.data
    })
})

const openWidnow = (item: any): void => {
    uiwu.openWindow(item.url)
}

const { setCurrent } = footerStore()
const jumpIntergral = () => {
	setCurrent(2)
	uiwu.openWindow('/pages/pointsmall/pointsmall')
}

</script>
<style lang="scss" scoped>
.container {
    background-color: rgba(247, 248, 249, 1);

    .header {
        height: 140px;
        border-radius: 20px;
        background: linear-gradient(245.48deg, rgba(237, 121, 126, 1)0%, rgba(230, 0, 18, 1)100%);

        .line {
            height: 0;
            border: 1px solid rgba(255, 255, 255, 1.00);
        }

        .item-line {
            height: 14px;
            width: 0px;
            border: 1px solid rgba(83, 83, 83, 1.00);
        }
    }

    .order {
        .title {
            color: rgba(35, 24, 21, 1);
        }

        .text {
            color: rgba(181, 181, 182, 1);
        }
    }
}
</style>